<!-- 继承模板 -->
{%extends "base.html" %}

<!-- css 样式 -->
{% block css%}
#spiders{
    margin:20px 20px 20px 20px;
}
#add {
    float:right;
    margin-right:80px;
    padding:10px;
}
#list-spiders {
    clear:both;
}
table {
    width: 100%;
}

table tr {
    line-height: 40px;
    border: none;
    text-align: center;
}

tbody > tr:nth-child(even) {
    background-color: #ccc;
}
tbody > tr:nth-child(odd) {
    background-color: rgb(187, 182, 182);
}
thead {
    background-color:#0080FF;
}

#pagination {
    text-align: center;
    margin-top: 50px;
    margin-bottom:80px;
}
#pagination a {
    text-decoration: none;
    border: 1px solid #f9d52b;
    padding:5px 7px;
    color:#767675;
    width:50px;
    cursor:pointer;
}
#pagination a:hover {color:red}

a { text-decoration:none;}
{% endblock %}

<!-- 内容 -->
{% block content %}
<div id="add">
        <a href="{% url 'add_spider' %}"><button>+</button></a>
</div>

<div id="spiders">

    <!-- 显示爬虫 -->
    <div id="list-spiders">
        <table border="0" cellspacing="0" cellpadding="0">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>spider</th>
                    <th>project</th>
                    <th>ip</th>
                    <th>port</th>
                    <th colspan='3'>操作</th>
                </tr>
            </thead>
            <tbody>
                {% for spider in spiders %}
                <tr class="row">
                    <td class="field-id">{{ spider.id }}</td>
                    <td class="field-spider"><a href="{% url 'spider_detail' sid=spider.id %}">{{ spider.spider_name }}</a></td>
                    <td class="field-project">{{ spider.project_name }}</td>
                    <td class="field-ip_port">{{ spider.ip }}</td>
                    <td class="field-port">{{ spider.port}}</td>
                    <td><a href="{% url 'update_spider' sid=spider.id %}">修改</a></td>
                    <td><a href="{% url 'del_spider'%}?sid={{ spider.id }}">删除</a></td>
                    <td><a href="#">添加任务</a></td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>

<!-- 翻页 -->
<div id="pagination">
    {% if cur_page > 1 %}
        <a href="{% url 'spiders' %}?size={{ size }}&page={{ cur_page|add:-1 }}">上一页</a>
    {% else %}
        <span>上一页</span>
    {% endif %}
    &nbsp;&nbsp;
    {% for pg in pages %}
    <a href="{% url 'spiders' %}?size={{ size }}&page={{ forloop.counter }}">{{forloop.counter}}</a>
    {% if forloop.last %}
        {% if forloop.counter > cur_page %}
        <span>...</span>
        &nbsp;&nbsp;
        <a href="{% url 'spiders' %}?size={{ size }}&page={{ cur_page|add:1 }}">下一页</a>
        {% else %}
        &nbsp;&nbsp;
        <span>下一页</span>
        {% endif %}
        &nbsp;&nbsp;
        <span>共 {{ cur_page }}/{{ forloop.counter }} 页</span>
    {% endif %}
    {% endfor %}    
</div>
{% endblock %}